<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<link rel="stylesheet" type="text/css" href="css/index.css"/>
	<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
	<script src="js/swiper.min.js"></script>
	<body>
	<div id="web">
		<header>
			<ul class="nav clearfix">
				<li><a href="project-ArtsBox/my-label.html"><img src="img/index/topLogo1.png" alt="" /></a></li>
				<li class="active"><a href="indexSM.html"><img src="img/index/topLogo2.png" alt="" /></a></li>
				<li><a href="trends.html"><img src="img/index/topLogo3.png" alt="" /></a></li>
				<li><a href="TodayStar.html"><img src="img/index/topLogo4.png" alt="" /></a></li>
				<li><a href="search.html"><img src="img/index/topLogo5.png" alt="" /></a></li>
			</ul>
		</header>
		<section>
			<aside>
				<div class="swiper-container">
						<div class="swiper-wrapper">
							<div class="carous swiper-slide"><img src="img/index/carous.jpg"/></div>
							<div class="carous swiper-slide"><img src="img/index/carous.jpg"/></div>
							<div class="carous swiper-slide"><img src="img/index/carous.jpg"/></div>
							<div class="carous swiper-slide"><img src="img/index/carous.jpg"/></div>
							<div class="carous swiper-slide"><img src="img/index/carous.jpg"/></div>
						</div>
				</div>
				<div class="swiper-pagination"></div>
			</aside>
			<article>
				<div class="navbar">
					<ul class="clearfix">
						<li><a href="project-ArtsBox/circle-classify.html"><img src="img/index/midLogo1.jpg" alt="" /></a></li>
						<li><a href=""><img src="img/index/midLogo2.jpg" alt="" /></a></li>
						<li><a href=""><img src="img/index/midLogo3.jpg" alt="" /></a></li>
						<li><a href=""><img src="img/index/midLogo4.jpg" alt="" /></a></li>
					</ul>
				</div>
				<div class="content">
					<a href="" class="title clearfix">
						<img class="fl" src="img/index/title.png" alt="" />
						<span class="fl">圈子推荐</span>
					</a>
					<ul class="circleMsg">
						<li class="clearfix">
							<div class="circleImg fl"><img src="img/index/circle1.jpg"/></div>
							<div class="circleInfo fr">
								<p class="cirTitle"><a href="project-ArtsBox/theme.html">广州舞者官方群</a></p>
								<p class="add clearfix">
									<a class="fl" href="">一场梦幻般的体验，小心迷失</a>
									<a href=""><img class="fr" src="img/index/titleLogo4.png" alt="" /></a>
								</p>
								<ul class="clearfix">
									<li class="clearfix">
										<img class="fl" src="img/index/titleLogo1.png"/>
										<p class="fl"><span>96</span></p>
									</li>
									<li class="clearfix">
										<img class="fl"  src="img/index/titleLogo2.png"/>
										<p class="fl"><span>96</span></p>
									</li>
									<li class="clearfix">
										<img class="fl"  src="img/index/titleLogo3.png"/>
										<p class="fl"><span>13</span></p>
									</li>
								</ul>
							</div>
						</li>
						<li class="clearfix">
							<div class="circleImg fl"><img src="img/index/circle2.jpg"/></div>
							<div class="circleInfo fr">
								<p class="cirTitle"><a href="">广州舞者官方群</a></p>
								<p class="add clearfix">
									<a class="fl" href="">一场梦幻般的体验，小心迷失</a>
									<a href=""><img class="fr" src="img/index/titleLogo4.png" alt="" /></a>
								</p>
								<ul class="clearfix">
									<li class="clearfix">
										<img class="fl" src="img/index/titleLogo1.png"/>
										<p class="fl"><span>96</span></p>
									</li>
									<li class="clearfix">
										<img class="fl"  src="img/index/titleLogo2.png"/>
										<p class="fl"><span>96</span></p>
									</li>
									<li class="clearfix">
										<img class="fl"  src="img/index/titleLogo3.png"/>
										<p class="fl"><span>13</span></p>
									</li>
								</ul>
							</div>
						</li>
						<li class="clearfix">
							<div class="circleImg fl"><img src="img/index/circle3.jpg"/></div>
							<div class="circleInfo fr">
								<p class="cirTitle"><a href="">广州舞者官方群</a></p>
								<p class="add clearfix">
									<a class="fl" href="">一场梦幻般的体验，小心迷失</a>
									<a href=""><img class="fr" src="img/index/titleLogo4.png" alt="" /></a>
								</p>
								<ul class="clearfix">
									<li class="clearfix">
										<img class="fl" src="img/index/titleLogo1.png"/>
										<p class="fl"><span>96</span></p>
									</li>
									<li class="clearfix">
										<img class="fl"  src="img/index/titleLogo2.png"/>
										<p class="fl"><span>96</span></p>
									</li>
									<li class="clearfix">
										<img class="fl"  src="img/index/titleLogo3.png"/>
										<p class="fl"><span>13</span></p>
									</li>
								</ul>
							</div>
						</li>
									<li class="clearfix">
							<div class="circleImg fl"><img src="img/index/circle1.jpg"/></div>
							<div class="circleInfo fr">
								<p class="cirTitle"><a href="">广州舞者官方群</a></p>
								<p class="add clearfix">
									<a class="fl" href="">一场梦幻般的体验，小心迷失</a>
									<a href=""><img class="fr" src="img/index/titleLogo4.png" alt="" /></a>
								</p>
								<ul class="clearfix">
									<li class="clearfix">
										<img class="fl" src="img/index/titleLogo1.png"/>
										<p class="fl"><span>96</span></p>
									</li>
									<li class="clearfix">
										<img class="fl"  src="img/index/titleLogo2.png"/>
										<p class="fl"><span>96</span></p>
									</li>
									<li class="clearfix">
										<img class="fl"  src="img/index/titleLogo3.png"/>
										<p class="fl"><span>13</span></p>
									</li>
								</ul>
							</div>
						</li>
						<li class="clearfix">
							<div class="circleImg fl"><img src="img/index/circle2.jpg"/></div>
							<div class="circleInfo fr">
								<p class="cirTitle"><a href="">广州舞者官方群</a></p>
								<p class="add clearfix">
									<a class="fl" href="">一场梦幻般的体验，小心迷失</a>
									<a href=""><img class="fr" src="img/index/titleLogo4.png" alt="" /></a>
								</p>
								<ul class="clearfix">
									<li class="clearfix">
										<img class="fl" src="img/index/titleLogo1.png"/>
										<p class="fl"><span>96</span></p>
									</li>
									<li class="clearfix">
										<img class="fl"  src="img/index/titleLogo2.png"/>
										<p class="fl"><span>96</span></p>
									</li>
									<li class="clearfix">
										<img class="fl"  src="img/index/titleLogo3.png"/>
										<p class="fl"><span>13</span></p>
									</li>
								</ul>
							</div>
						</li>
						<li class="clearfix">
							<div class="circleImg fl"><img src="img/index/circle3.jpg"/></div>
							<div class="circleInfo fr">
								<p class="cirTitle"><a href="">广州舞者官方群</a></p>
								<p class="add clearfix">
									<a class="fl" href="">一场梦幻般的体验，小心迷失</a>
									<a href=""><img class="fr" src="img/index/titleLogo4.png" alt="" /></a>
								</p>
								<ul class="clearfix">
									<li class="clearfix">
										<img class="fl" src="img/index/titleLogo1.png"/>
										<p class="fl"><span>96</span></p>
									</li>
									<li class="clearfix">
										<img class="fl"  src="img/index/titleLogo2.png"/>
										<p class="fl"><span>96</span></p>
									</li>
									<li class="clearfix">
										<img class="fl"  src="img/index/titleLogo3.png"/>
										<p class="fl"><span>13</span></p>
									</li>
								</ul>
							</div>
						</li>
					</ul>	
				</div>
			</article>
		</section>
			<div class="popping" id="pop">
				<div class="poppingWrap" id="poppingWrap">
					<ul class="one clearfix">
						<li>
							<a href="login-artbox/publish.html">
							<div class="icon_img">
								<img src="project-ArtsBox/img/icon7.png"/>
							</div>
							<span>发动态</span>
							</a>
						</li>
						<li>
							<a href="">
							<div class="icon_img">
								<img src="project-ArtsBox/img/icon8.png"/>
							</div>
							<span>创建圈子</span>
							</a>
						</li>
						<li>
							<a href="">
							<div class="icon_img">
							<img src="project-ArtsBox/img/icon9.png"/>	
							</div>
							<span>扫一扫</span>
							</a>
						</li>
					</ul>
					<ul class="two clearfix">
						<li>
							<a href="project-ArtsBox/send-notice.html">
							<div class="icon_img">
								<img src="project-ArtsBox/img/icon10.png"/>
							</div>
							<span>发通告</span>
							</a>
						</li>
						<li>
							<a href="">
							<div class="icon_img">
								<img src="project-ArtsBox/img/icon11.png"/>
							</div>
							<span>发活动</span>
							</a>
						</li>
					</ul>
					
					<div class="close" id="close">
						<a href="javascript:;"><img src="project-ArtsBox/img/icon12.png"/></a>
					</div>
					
				</div>
			</div>
		<footer>
			<ul>
				<li><a href="MyInfo.html"><img src="img/index/bottomlogo1.png" alt="" /></a></li>
				<li><a href="announce.html"><img src="img/index/bottomlogo2.png" alt="" /></a></li>
				<li id="poping"><a href="javascript:;"><img src="img/index/logo.png" alt="" /></a></li>
				<li><a href="project-ArtsBox/information.html"><img src="img/index/bottomlogo3.png" alt="" /></a></li>
				<li><a href="login-artbox/register.html"><img src="img/index/bottomlogo4.png" alt="" /></a></li>
			</ul>
		</footer>
	</div>
	<script src="js/getFont.js"></script>	
	<script>
		new Swiper("section .swiper-container",{
			loop:true,
			direction: 'horizontal',
			autoplay:4000,
		// 如果需要分页器
			pagination: '.swiper-pagination',
			paginationClickable :true,
		});
	</script>
	<script>
		var oPop=document.getElementById('pop');
		var oPoping=document.getElementById('poping');
		var oPoppingWrap=document.getElementById('poppingWrap');
		var oClose=document.getElementById('close');
		oPoping.onclick=function(){
			oPop.style.display='block';
			setTimeout(function(){
				//110%
				oPoppingWrap.style.transform='translateY(82%)';
			},100)
		}
		oClose.onclick=function(){
			oPoppingWrap.style.transform='translateY(260%)';
			setTimeout(function(){
				oPop.style.display='none';
			},500)
			
		}
	</script>
	</body>
	
</html>
